<template>
	<view class="main">
		<view class="center">
			<image clss="imgIcon" src="https://m2.im5i.com/2022/01/06/UhdN0B.png" mode=""></image>
			<view class="titles">
				第六感美业
			</view>
		</view>
		<view class="ring-progress" @click="goHome()">
			<view class="ring">
				<view class="seconds">
					跳过{{seconds}}秒
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				hasUserInfo: false,
				canIUseGetUserProfile: false,
				seconds: 5,
			}
		},
		onLoad() {
			this.getUserInfo()
			if (wx.getUserProfile) {
				this.canIUseGetUserProfile = true
			}
		},
		mounted() {
			this.countDownStart()
		},
		methods: {
			goHome() {
				uni.redirectTo({
					url: '/pages/tabbar/home/home'
				})

			},
			countDownStart() {
				let clock = setInterval(() => {
					this.seconds--;
					if (this.seconds <= 0) { //当倒计时小于0时清除定时器
						clearInterval(clock)
						return this.goHome()
					} 
				}, 1000)
			},
			getUserInfo(e) {
				uni.authorize({
					scope: 'scope.userInfo',
					success() {
						uni.getUserInfo({
							success: (res) => {
								console.log(res);
							},
							fail: () => {
								console.log("未授权");
							}
						})
					},
					fail() {
						uni.openSetting({
							success(res) {
								console.log(res.authSetting)
							}
						});
					}
				})
			}
		}
	}
</script>

<style>
	.main {
		height: 100vh;
		width: 100vw;
		position: relative;
		background-image: linear-gradient(to top left, rgb(66, 83, 216), #00ff7e);
	}

	.center {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -100%);
		text-align: center;
		animation: imgIcon 1s infinite;
	}

	@keyframes imgIcon {
		0% {
			transform: translate(-50%, -100%) scale(1);
		}

		50% {
			transform: translate(-50%, -100%) scale(1.1);
		}

		100% {
			transform: translate(-50%, -100%) scale(1);
		}
	}

	.main .titles {
		/*从左向右 从右向左是 writing-mode: vertical-rl;*/
		/* writing-mode: vertical-lr; */
		/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
		/* writing-mode: tb-lr; */
		font-size: 54rpx;
		font-family: '楷体';
		color: #303133;
		text-shadow: 10rpx 10rpx 10rpx #ff5500;
		text-shadow: 10rpx 10rpx 10rpx #fff;
		text-align: center;
	}

	.ring-progress {
		position: absolute;
		bottom: 40rpx;
		right: 40rpx;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background-image: linear-gradient(to right, rgb(216 177 66), #ff0076ba);
		padding: 10rpx;
		box-sizing: border-box;
		font-size: 26rpx;
		line-height: 32rpx;
		text-align: center;
		color: #fff;
	}

	image {
		width: 160rpx;
		height: 200rpx;
	}
</style>
